<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="header">
			<view class="user" @click="onLogOut">
				<view class="avatar">
					<u--image shape="circle"
						:src="(userInfo.user_id && userInfo.avatar_id)?userInfo.avatar.file_path:'https://img.alicdn.com/imgextra/i3/2064565174/O1CN01E09e6U1o5k3IWfKNq_!!2064565174.png'"
						width="160rpx" height="160rpx"></u--image>
				</view>
				<view class="info">
					<view class="name">
						{{ userInfo.user_id?userInfo.nickName:'点击快速登录' }}
					</view>
					<view class="id">ID: {{ userInfo.user_id?userInfo.user_id:'100000' }}</view>
				</view>
				<!-- <view class="role">
					<view class="tips">创作者</view>
				</view> -->
				<!-- <view class="icon">
					<u-icon size="20"
						name="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/e62b3a8ff54146c0f8314e9a0bdd13fd.png">
					</u-icon>
				</view> -->
			</view>
			<view class="panel">
				<view class="title">
					我的服务
				</view>
				<view class="grid">
					<u-grid :border="false" :col="store.is_author_close == 10?4:3">
						<!-- @click="onWalletBalance" -->
						<u-grid-item @click="onAuthorCenter" v-if="store.is_author_close == 10">
							<u-icon
								name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN017Nv1yL1o5k3669RXF_!!2064565174.png"
								:size="22"></u-icon>
							<text class="grid-text">创作中心</text>
						</u-grid-item>
						<u-grid-item @click="onRechargeOrder">
							<u-icon
								name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01TDIB2D1o5k34zyKDm_!!2064565174.png"
								:size="22"></u-icon>
							<text class="grid-text">充值明细</text>
						</u-grid-item>
						<u-grid-item @click="onQuickRecharge">
							<u-icon
								name="https://img.alicdn.com/imgextra/i4/2064565174/O1CN01eqjwd31o5k33W4DcN_!!2064565174.png"
								:size="22"></u-icon>
							<text class="grid-text">快捷充值</text>
						</u-grid-item>
						<u-grid-item @click="onTeam">
							<u-icon
								name="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01CqSyQN1o5k38pQ6Nc_!!2064565174.png"
								:size="22"></u-icon>
							<text class="grid-text">我的团队</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="talent" @click="onWalletBalance">
			<view class="panel">
				<view class="title">
					数据面板
				</view>
				<view class="grid">
					<u-grid :border="false" col="3">
						<u-grid-item>
							<u-icon
								name="https://img.alicdn.com/imgextra/i2/2064565174/O1CN0119B8mz1o5k30KkN9C_!!2064565174.png"
								:size="22"></u-icon>
							<text class="number">{{ dealer?dealer.total_money:'0.00' }}</text>
							<text class="grid-text">累计提现</text>
						</u-grid-item>
						<u-grid-item>
							<u-icon
								name="https://img.alicdn.com/imgextra/i2/2064565174/O1CN01zNuwC81o5k36nkXwh_!!2064565174.png"
								:size="22"></u-icon>
							<text class="number">{{ dealer?dealer.money:'0.00' }}</text>
							<text class="grid-text">账户余额</text>
						</u-grid-item>
						<u-grid-item>
							<u-icon
								name="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01ppKVVu1o5k33W4YOw_!!2064565174.png"
								:size="22"></u-icon>
							<text class="number">{{ dealer?dealer.freeze_money:'0.00' }}</text>
							<text class="grid-text">冻结中</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<view class="tool">
			<view class="panel">
				<view class="title">
					常用功能
				</view>
				<view class="cell">
					<u-cell-group :border="false">
						<u-cell url="/pages/user/points/log" :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i4/2064565174/O1CN01cA3Fr71o5k31rRkey_!!2064565174.png"
							title="金币日志"></u-cell>
						<u-cell url="/pages/user/order/index" :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i3/2064565174/O1CN012HtqPw1o5k33W5I7U_!!2064565174.png"
							title="我的订单"></u-cell>
						<u-cell url="/pages/cover/user/index" :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01IG0Wxz1o5k31rQPXi_!!2064565174.png"
							title="我的封面"></u-cell>
						<u-cell url="/pages/draw/user/index" :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i3/2064565174/O1CN0179PsO01o5k2vxBvfh_!!2064565174.png"
							title="我的绘画"></u-cell>
						<u-cell url="/pages/study/index/index" :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i1/2064565174/O1CN01ZKbkII1o5k30Kjlko_!!2064565174.png"
							title="学院中心"></u-cell>
						<u-cell :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i4/2064565174/O1CN019TjQk71o5k30DEn1e_!!2064565174.png">
							<view slot="title">
								<button open-type="contact" class="u-reset-button">
									在线客服
								</button>
							</view>
						</u-cell>
						<!-- 						<u-cell :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i1/2064565174/O1CN011LidfG1o5k2rBXDho_!!2064565174.png"
							title="关于我们"></u-cell> -->
						<u-cell @click="onLogOut" :border="false" :isLink="true"
							icon="https://img.alicdn.com/imgextra/i3/2064565174/O1CN01Z19TuC1o5k30saas1_!!2064565174.png"
							title="退出登录"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</view>
		<!-- 版权说明 -->
		<view class="copyright">
			<view class="text">{{ store.copyright }}</view>
		</view>
	</view>
</template>

<script>
	import {
		detail
	} from '@/api/user.js';
	import {
		config
	} from '@/api/system.js';
	import {
		dealer
	} from '@/api/dealer.js';
	export default {
		data() {
			return {
				store: {},
				dealer: {},
				platform: '',
				userInfo: {}
			};
		},
		onShow() {
			this.getUser()
			this.getDealer()
		},
		onLoad() {
			this.getStore()
		},
		methods: {
			getDealer() {
				dealer({}).then(res => {
					this.dealer = res.data.dealer
				}).catch(err => {

				})
			},
			onAuthorCenter() {
				uni.navigateTo({
					url: '/pages/author/manage/index'
				})
			},
			getStore() {
				let _this = this;
				config({
					key: 'store'
				}).then(res => {
					_this.store = res.data.config
					let port = uni.getSystemInfoSync().platform
					switch (port) {
						case 'android':
							console.log('运行Android上', port); //android
							this.platform = 'android'
							break;
						case 'ios':
							console.log('运行iOS上', port);
							this.platform = 'ios'
							break;
						default:
							console.log('运行在开发者工具上'); //devtools
							this.platform = 'devtools'
							break;
					}
				}).catch(err => {

				})
			},
			onDraw() {
				uni.navigateTo({
					url: '/pages/draw/user/index'
				})
			},
			onTeam() {
				uni.navigateTo({
					url: '/pages/user/team/index'
				})
			},
			onDayTask() {
				uni.reLaunch({
					url: '/pages/main/task/index'
				})
			},
			onLogOut() {
				let _this = this
				uni.setStorageSync("token", "")
				_this.$refs.uToast.show({
					type: 'success',
					message: "即将跳转登录...",
					complete() {
						_this.getUser()
						uni.navigateTo({
							url: '/pages/main/passport/login'
						})
					}
				})
			},
			onWalletBalance() {
				uni.navigateTo({
					url: '/pages/wallet/index/index'
				})
			},
			onRechargeOrder() {
				uni.navigateTo({
					url: '/pages/wallet/order/index'
				})
			},
			onQuickRecharge() {
				let _this = this
				if (_this.platform == 'ios') {
					if (_this.store.is_ios_pay == 20) {
						_this.$refs.uToast.show({
							type: 'error',
							message: "IOS端暂不支持",
							complete() {}
						})
						return false;
					}
				}
				uni.navigateTo({
					url: '/pages/wallet/recharge/index'
				})
			},
			getUser() {
				detail({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 60rpx;
	}


	/* 版权 */
	.copyright {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;

		.text {
			font-size: 20rpx;
			color: #bababa;
		}
	}

	.talent {
		width: 92%;
		margin: 0 auto;

		.panel {

			.number {
				color: #f22e38;
				font-weight: bolder;
				margin-top: 15rpx;
			}
		}
	}

	.tool {
		width: 92%;
		margin: 0 auto;
	}

	.panel {
		background-color: #ffffff;
		padding: 15rpx 30rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;

		.cell {
			.u-reset-button {
				text-align: left;
				color: #303133;
			}
		}

		.title {
			color: #f22e38;
			margin-bottom: 15rpx;
		}

		.grid {
			.grid-text {
				margin: 15rpx 0rpx;
			}
		}
	}

	.header {
		padding: 150rpx 31rpx 0;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63889c845a7e3f0310de5223/6398219cd109e60012196b2c/16710785369321773898.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 200rpx;

		.user {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 30rpx;

			.role {
				.tips {
					background-color: #ffdee0;
					border-radius: 5rpx;
					color: #f22e38;
					font-size: 28rpx;
					height: 52rpx;
					line-height: 52rpx;
					padding: 0rpx 15rpx;
					border-radius: 10rpx;
				}
			}

			.avatar {
				margin-right: 15rpx;
			}

			.info {
				width: 80%;

				.name {
					// width: 200rpx;
					width: 100%;
					color: #333;
					font-size: 38rpx;
					font-family: SourceHanSansCN;
					// overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
				}

				.id {
					color: #999;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>
